<template>
	<u-popup
		v-model="shareShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="info">
				<view class="top" ref="top">
					<view class="top-text">
						<view class="text-left">
							<view>万泉农场</view>
							<view>扫码为我助力，</view>
							<view>加入万泉农场！</view>
						</view>
						<view class="text-right">
							<uqrcode 
								ref="uqrcode"
								canvas-id="qrcode"
								value="https://uqrcode.cn/doc"
								:size="124"
								sizeUnit="rpx"
								:options="options"></uqrcode>
						</view>
					</view>
					<image
						src="/static/images/chicken/share/bg.png"
						mode="widthFix"></image>
					<image
						class="share-pic"
						v-if="sharePic"
						:src="sharePic"
						mode="widthFix"></image>
				</view>
				<view class="bottom-btn">
					<view
						v-for="(val, index) in btnList"
						:key="index"
						@click="clickBtn(val)"
						class="item">
						<image
							:src="val.img"
							mode="widthFix"></image>
						<view>{{ val.name }}</view>
					</view>
				</view>
			</view>

			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/conversion_arrow.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	import html2canvas from "html2canvas";
	
	export default {
		name: 'myFriend',
		props: {
			shareShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				btnList: [
					{
						id: 1,
						name: '微信',
						img: '/static/images/chicken/share/wechat.png',
					},
					{
						id: 2,
						name: '朋友圈',
						img: '/static/images/chicken/share/pyq.png',
					},
					{
						id: 3,
						name: 'QQ',
						img: '/static/images/chicken/share/qq.png',
					},
					{
						id: 4,
						name: '保存图片',
						img: '/static/images/chicken/share/save_pic.png',
					},
				],
				options: {},
				sharePic: '',
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'shareShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			clickBtn(val) {
				let obj = {
					1: '',
					2: '',
					3: '',
					4: 'savePic',
				};
				obj[val.id] && this[obj[val.id]]();
			},
			savePic() {
				html2canvas(this.$refs.top.$el, {
				  scale: 2,
				  allowTaint: true, //允许加载跨域的图片
				  tainttest: true, //检测每张图片都已经加载完成
				  logging: false, //日志开关，发布的时候记得改成false
				  useCORS: true, // 用CORS从服务器加载映像
				}).then(canvas => {
					let saveUrl = canvas.toDataURL("image/png");
					this.sharePic = saveUrl;
					uni.showToast({
						title: '海报生成成功，请长按上图保存转发！',
						icon: 'none',
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.share-pic {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 11;
		width: 100%;
	}
	.box {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: transparent;
		.info {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 11;
			width: 100%;
			padding: 50rpx 45rpx 95rpx;
			background: #f5f5f5;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			color: #2B3028;
			.top {
				position: relative;
				width: 100%;
				margin-bottom: 50rpx;
				image {
					width: 100%;
				}
				.top-text {
					position: absolute;
					left: 0;
					bottom: 58rpx;
					z-index: 1;
					display: flex;
					justify-content: space-between;
					width: 100%;
					padding: 0 48rpx;
					.text-left {
						view:first-of-type {
							margin-bottom: 26rpx;
							font-size: 32rpx;
							font-weight: bold;
						}
						view:not(:first-of-type) {
							opacity: .7;
						}
						view:last-of-type {
							margin-top: 10rpx;
						}
					}
					.text-right {
						width: 124rpx;
						height: 124rpx;
						// background-color: #2B3028;
					}
				}
			}
			.bottom-btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image {
						width: 100rpx;
						margin-bottom: 22rpx;
					}
				}
			}
		}
		.close {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
	}
}
</style>